<template>
	<view	class="container">
		<view class="left">
		<!-- 	<view class="leftText">
				<view class="active">品牌强</view>
			</view> -->
			<view class="leftText" :class="{'activea': currentId === text.id}" v-for="(text,index) in cateDataList" :key="text.id" @click="changeNav(text.id)">
				<view :class="{'active': currentId === text.id }">{{text.name}}</view>
			</view>
		</view>
		<view class="right">
			<scroll-view class="rightScroll" scroll-y="true" enable-flex>
				<view class="rightHead">
					{{getObj.subCateList[0].name}}
				</view>
				<view class="rightMain">
					<view	class="item" v-for="(item,index) in getObj.subCateList" :key="index">
						<image :src="item.wapBannerUrl" mode=""></image>
						<text>{{item.name}}</text>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {mapState} from "vuex"
	export default {
		data() {
			return {
				currentId:1005000,
			};
		},
		mounted() {
			this.getCateData()
		},
		methods:{
			getCateData(){
				this.$store.dispatch("category/getCateDataList")
			},
			changeNav(value){
				this.currentId = value			
			}
		},
		computed:{
			// currentList(){
			// 	return 
			// },
			...mapState("category",["cateDataList"]),
			getObj(){
				let obj = this.cateDataList.find((item)=>{
				return this.currentId === item.id 
				})
				return obj
			}
		}
	}
</script>

<style lang="stylus">
.container
	height: 100%
	display: flex
	.left
		display: flex
		flex-direction: column
		align-items: center
		width: 25%
		height: 100%
		// background: pink
		.leftText
			height: 100upx
			line-height: 100upx
			font-size: 28upx
			color: #666
			display: flex
			align-items: center
			.active
				padding:5upx 14upx
				text-align: center
				line-height:52upx
				color: white
				// height: 52upx
				// width: 112upx
				border-radius: 50upx
				background-image: linear-gradient(-90deg,red,#ff3264);
	.right
		box-sizing: border-box
		border-left:2upx solid #ddd
		width: 75%
		height: 100%
		// background-color: yellow
	.rightScroll
		height: 100%
		.rightHead
			height: 30upx
			line-height: 30upx
			padding-left: 30upx
			margin: 16upx 0
		.rightMain
			display: flex
			// align-items: center
			// justify-content: space-around
			flex-wrap: wrap 
			.item
				width: 33.333%
				height: 240upx
				display: flex
				flex-direction: column
				align-items: center
				justify-content: flex-start
				// text-align: center
				image
					width: 180upx
					height: 180upx
				text
					font-size: 24upx
					margin-bottom: 10upx
</style>
